<template>
  <el-button
    class="customButton"
    :type="buttonType"
    :size="buttonSize"
    :plain="isPlain"
    :round="isRound"
    :circle="isCircle"
    :loading="isLoading"
    :icon="icon"
    :disabled="disabled"
    @click="$emit('click')"
  >
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    type: {
      type: String,
      default: 'default', // 默认按钮类型
    },
    size: {
      type: String,
      default: 'medium', // 默认按钮大小
    },
    // Element UI 的 el-button 组件的其他属性...
    plain: Boolean,
    round: Boolean,
    circle: Boolean,
    loading: Boolean,
    icon: String,
    disabled: Boolean
  },
  computed: {
    buttonType() {
      return this.type; // 可以根据实际需要添加更多的逻辑
    },
    buttonSize() {
      return this.size; // 同样，可以根据实际需要添加更多的逻辑
    },
    isPlain() {
      return this.plain;
    },
    isRound() {
      return this.round;
    },
    isCircle() {
      return this.circle;
    },
    isLoading() {
      return this.loading;
    },
  },
};
</script>

<style scoped lang="scss">
.customButton {
  padding: 6px 20px;
  font-size: 12px;
}
</style>
